<template>
	<div class="container">
		<!-- <image src="/static/images/index-banner.png" class="index-banner" mode="widthFix"></image> -->
		<u-swiper :list="list" indicatorActiveColor='rgb(52,167,128)' indicator indicatorMode="line" circular>
		</u-swiper>

		<view class="timer">
			<view class="timer-left">
				<text class="status">今日开放</text>
				<view class="l-btm">
					<text class="date">9月20日 18°~30°</text>
					<image src="/static/images/weather.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="timer-right">
				<image src="/static/images/index-map.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="opera">
			<image @click="handleNavTo('/pages/device/deviceIndex/deviceIndex')" src="/static/images/index-device.png"
				mode="widthFix"></image>
			<image @click="handleNavTo('/pages/mapIndex/mapIndex')" src="/static/images/index-map-btn.png"
				mode="widthFix"></image>
		</view>

		<view class="notice">
			<image src="/static/images/notice.png" mode="widthFix" class="notice-img"></image>
			<swiper class="swiper" circular :indicator-dots="false" vertical autoplay>
				<swiper-item>
					<view class="swiper-desc">因游客过多，景区暂时关闭，请耐心等待后续通知请耐心等待后续通知请耐心等待后续通知请耐心等待后续通知xxxxxxx</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-desc">因游客过多，景区暂时关闭，请耐心等待后续通知请耐心等待后续通知请耐心等待后续通知请耐心等待后续通知xxxxxxx</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-desc">因游客过多，景区暂时关闭，请耐心等待后续通知请耐心等待后续通知请耐心等待后续通知请耐心等待后续通知xxxxxxx</view>
				</swiper-item>
			</swiper>
			<u-icon name="arrow-right" color="#333" size="22"></u-icon>
		</view>

		<view class="menus">
			<view class="menu" v-for='(it,index) in menus' @click="handleClickMenu(it)" :key="index">
				<image :src="it.img" mode=""></image>
				<text class="menu-title">{{it.title}}</text>
			</view>
		</view>

		<!-- <view class="card-title">
			<text class="title">
				预警提醒
			</text>
			<view class="more">
				更多
				<u-icon name="arrow-right-double"></u-icon>
			</view>
		</view>
		<view class="alarms">
			<view class="alarm" v-for='(it,index) in alarmList' :key="index">
				<view class="alarm-t">
					<text class="title">因天气原因，滕王阁景点暂时关闭</text>
					<u-tag text="已读" plain plainFill type="warning"></u-tag>
				</view>
				<view class="alarm-c">
					因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭
				</view>
				<view class="alarm-b">
					<text class="time">
						2024-09-03 12:33:44
					</text>
				</view>
			</view>
		</view> -->

		<view class="jj">
			<view class="card-title">
				<text class="title">
					景点推荐
				</text>
				<view class="more" @click="handleNavToSpot">
					更多
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<u-swiper class="swiper" :list="list" previousMargin="30" nextMargin="30" circular indicator
				indicatorMode="line" circular>
			</u-swiper>
		</view>

		<view class="road-content">
			<view class="card-title">
				<text class="title">
					游玩路线
				</text>
				<view class="more" @click="handleNavTo('/pages/roadList/roadList')">
					更多
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="roads">
				<view class="road" v-for="it in 6">
					<image src="/static/images/road-demo1.png" mode="widthFix"></image>
					<view class="c-content">
						<view class="c-title">无障碍路线图</view>
						<view class="c-desc">点击查看</view>
						<view class="tags">
							<text class="tag">纳凉路线</text>
							<text class="tag">观景路线</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 

		<view class="card-title">
			<text class="title">
				报警处理
			</text>
			<view class="more">
				更多
				<u-icon name="arrow-right-double"></u-icon>
			</view>
		</view>
		
		
		<view class="card-title">
			<text class="title">
				故障处理
			</text>
			<view class="more">
				更多
				<u-icon name="arrow-right-double"></u-icon>
			</view>
		</view> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				alarmList: [{}, {}],
				list: [
					'/static/images/index-banner.png',
					'/static/images/index-banner.png',
					'/static/images/index-banner.png',
				],
				menus: [{
					img: '/static/images/menu1.png',
					title: '参观须知',
					path: '/pages/noticeForVisitors/noticeForVisitors'
				}, {
					img: '/static/images/menu2.png',
					title: '推荐路线',
					path: '/pages/roadList/roadList'
				}, {
					img: '/static/images/menu3.png',
					title: '留言意见',
					path: '/pages/leaveWord/leaveWordList/leaveWordList'
				}, {
					img: '/static/images/menu4.png',
					title: '语音墙',
					path: '/pages/voiceWall/voiceWallIndex/voiceWallIndex'
				}, {
					img: '/static/images/menu5.png',
					title: '电子围栏',
					path: '/pages/fence/fenceIndex/fenceIndex'
				}, {
					img: '/static/images/menu6.png',
					title: '实时定位',
					path: '/pages/realTimeAddress/realTimeAddress'
				}, {
					img: '/static/images/menu7.png',
					title: '一键报警',
					path: '/pages/alarmPage/alarmFrom/alarmFrom',
				}, {
					img: '/static/images/menu8.png',
					title: '通知公告',
					path: '/pages/notice/noticeList/noticeList'
				}, {
					img: '/static/images/menu8.png',
					title: '故障工单',
					path: "/pages/fault/faultList/faultList",
				}, {
					img: '/static/images/menu8.png',
					title: '巡检列表',
					path: "/pages/plan/planList/planList",
				}]
			}
		},
		methods: {
			handleNavTo(url) {
				console.log(url)
				uni.navigateTo({
					url
				})
			},
			handleClickMenu(it) {
				if (it.path) {
					uni.navigateTo({
						url: it.path
					})
				}
			},
			handleNavToSpot() {
				this.$emit('changePageIndex', 1)
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: $uni-color-bg;

		.road-content {
			width: calc(100% - 60upx);
			margin: 22upx 0;
			margin-left: 30upx;
			background-color: #fff;
			padding-bottom: 22upx;

		}

		.jj {
			width: calc(100% - 60upx);
			margin: 22upx 0;
			margin-left: 30upx;
			background-color: #fff;
			padding-bottom: 22upx;

			.swiper {
				margin-top: 22upx;
				background-color: #fff !important;
			}
		}

		.notice {
			display: flex;
			align-items: center;
			padding: 22upx 30upx;
			box-sizing: border-box;
			background-color: #fff;
			width: calc(100% - 60upx);
			margin: 22upx 0;
			margin-left: 30upx;
			border-radius: 12upx;

			.notice-img {
				width: 60upx;
				height: 60upx;
			}

			.swiper {
				height: 60upx;
				width: calc(100% - 120upx);
				margin: 0 30upx;
				color: #333;

				.swiper-desc {
					color: #333;
					font-size: 28upx;
					height: 100%;
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 2;
				}
			}
		}

		.timer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30upx;
			box-sizing: border-box;

			.timer-right {
				width: 20%;
				margin-right: 30upx;

				image {
					width: 100%;
				}
			}

			.timer-left {
				display: flex;
				flex-direction: column;
				color: $uni-color-primary;

				.status {
					font-size: 36upx;
				}

				.l-btm {
					margin-top: 12upx;
					display: flex;
					align-items: center;

					image {
						width: 60upx;
						margin-left: 12upx;
					}

					.date {
						white-space: nowrap;
						font-size: 32upx;

					}
				}


			}
		}
	}

	.card-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22upx 30upx;
		box-sizing: border-box;
		border-bottom: 1upx solid $uni-color-primary;

		.title {
			font-size: 36upx;
			color: $uni-color-primary;
		}

		.more {
			display: flex;
			color: $uni-text-color-grey;
			align-items: center;
			font-size: 28upx;
		}
	}

	.index-banner {
		width: 100%;
	}

	.opera {
		// background-color: rgb(235, 245, 255);
		padding: 0 30upx;
		z-index: 9;
		box-sizing: border-box;
		// box-shadow: $default-shadow;
		display: flex;
		align-items: center;
		border-radius: 20upx;

		image {
			width: 35%;

			&:last-child {
				width: calc(65% - 30upx);
				margin-left: 30upx;
			}
		}
	}

	.menus {
		display: flex;
		flex-wrap: wrap;
		padding: 22upx 0;
		box-sizing: border-box;
		background-color: #fff;
		font-size: 28upx;
		width: calc(100% - 60upx);
		margin-left: 30upx;

		.menu {
			width: calc(25%);

			// margin-right: calc(80upx/3);
			&:nth-child(4n) {
				margin-right: 0;
			}

			margin-bottom: 22upx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 80upx;
				height: 80upx;
			}

			text {
				margin-top: 4upx;
			}
		}
	}

	.roads {
		padding: 22upx 0;
		box-sizing: border-box;

		.road {
			display: flex;
			align-items: center;
			padding: 22upx 30upx;
			box-sizing: border-box;
			border-bottom: 1upx solid $uni-color-bg-s;

			image {
				width: 160upx;
			}

			.c-content {
				display: flex;
				flex-direction: column;
				width: calc(100% - 120upx);
				margin-left: 20upx;

				.c-title {
					font-size: 34upx;
					font-weight: 600;
				}

				.c-desc {
					color: #666;
					font-size: 28upx;
					margin: 8upx 0;
					margin-bottom: 16upx;
				}

				.tags {
					display: flex;

					.tag {
						background-color: $uni-color-bg-s;
						padding: 8upx 16upx;
						font-size: 26upx;
						margin-right: 8upx;
						color: $uni-color-primary;
					}
				}
			}
		}
	}

	.alarms {
		padding: 0 30upx;
		box-sizing: border-box;

		.alarm {
			padding: 22upx 30upx;
			box-sizing: border-box;
			border: 1upx solid $uni-border-color;
			border-radius: 12upx;
			position: relative;
			background-color: #fff;
			margin-bottom: 22upx;

			&:before {
				content: '';
				border-radius: 12px;
				background-color: orange;
				width: 100%;
				height: calc(100%);
				position: absolute;
				top: 0;
				z-index: -1;
				left: -16upx;
			}

			.alarm-t {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-size: 32upx;
				}
			}

			.alarm-c {
				font-size: 28upx;
				color: $uni-text-color-grey;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				line-height: 1.6;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin: 12upx 0;
			}

			.alarm-b {
				display: flex;

				.time {
					margin-left: auto;
					font-size: 28upx;
				}
			}
		}
	}
</style>